<template>
    <div>
        <el-table
            ref="table"
            :data="tableData"
            border
            @sort-change='tableSortChange'
            @row-click="lookOrder"
            v-show="table_show"
        >
            <el-table-column
                width="60"
                align="center"
                label="ID"
            >
                <template slot-scope="scope">
                    {{(scope.$index + 1) + (current_page - 1) * per_page}}
                </template>
            </el-table-column>
            <el-table-column
                label="代理人"
                align="left"
                sortable="custom"
                prop="agentName"
                width="100"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <span :class="scope.row.type == '离职' ? 'finish' : ''">{{scope.row.agentName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                v-for="item in tableHeader"
                :key="item.id"
                :label="item.label"
                :align="item.align"
                :prop="item.prop"
                :min-width="item.minWidth ? item.minWidth : ''"
                sortable="custom"
            ></el-table-column>
        </el-table>
        <agentRateDetails ref="agentRateDetails"/>
    </div>
</template>

<script>
import agentRateDetails from './agentRateDetails-dialog'
export default {
    components: {
        agentRateDetails
    },
    data() {
        return {
            table_show: true
        }
    },
    props: {
        tableHeader: {
            type: Array,
            default: () => []
        },
        tableData: {
            type: Array,
            default: () => []
        },
        per_page: {
            type: Number,
            default: 25
        },
        current_page: {
            type: Number,
            default: 1
        },
        activeTabs: {
            type: String,
        }
    },

    watch: {
        tableData: {
            handler: function(val) {
            },
            immediate: true,
            deep: true
        }
    },

    methods: {
        resetSort() {
            this.$refs['table'].clearSort()
        },
        tableSortChange(column) {
            let sort_params = {
                sort_str: column.prop
            }
            if (column.order == 'ascending') {
                sort_params.sort_order = 'asc'
            } else if (column.order == 'descending') {
                sort_params.sort_order = 'desc'
            } else {
                sort_params = {}
            }
            this.$emit('sortMethods', sort_params)
        },
        lookOrder(row) {
            if (this.activeTabs == 'agent-rate') {
                this.$refs['agentRateDetails'].show(row)
            }
        }
    }
}
</script>
